<template>
	<view>
		
		<template v-if="isshow">
			<!-- 养殖户 -->
			<template v-if="user">
				<view class="head">
					<view class="headContent">
						<text style="color: white; font-size: 60rpx; margin-top: 100rpx;">
							生产管理
						</text>
						<text style="color: white; font-size: 24rpx; margin-top: 16rpx;">
							PRODUCTION MANAGEMENT
						</text>
					</view>
					<!-- <view class="img">
						<image @tap="scanQR()" src="../../static/productionAdmin/scancode.png" style="width: 60rpx; height: 60rpx; margin-right: 40rpx; margin-top: 60rpx;"
						 mode="aspectFit"></image>
					</view> -->
				</view>
				<view class="footer">
					<view class="footerConten" @tap="farmFilePost()">
						<image src="../../static/productionAdmin/dangantianbao.png" style="width: 150rpx; height: 150rpx; margin-left: 30rpx;"
						 mode="aspectFit"></image>
						<view style="display: flex; flex-direction: column;">
							<text style="font-size: 34rpx; font-weight: 600; margin-bottom: 10rpx;">养殖场档案填报</text>
							<text style="font-size: 26rpx; color: #C3C3C3;">养殖场账号权限申请</text>
						</view>
						<image src="../../static/productionAdmin/button2.png" style="width: 60rpx; height: 60rpx; margin-right: 30rpx;"
						 mode="aspectFit"></image>
					</view>
					<view class="footerConten" @tap="faecesDispose()">
						<image src="../../static/productionAdmin/wufenzhidao.png" style="width: 150rpx; height: 150rpx; margin-left: 30rpx;"
						 mode="aspectFit"></image>
						<view style="display: flex; flex-direction: column;">
							<text style="font-size: 34rpx; font-weight: 600; margin-bottom: 10rpx;">污粪指导</text>
							<text style="font-size: 26rpx; color: #C3C3C3;">查看畜牧局给予的指导</text>
						</view>
						<image src="../../static/productionAdmin/button2.png" style="width: 60rpx; height: 60rpx; margin-right: 30rpx;"
						 mode="aspectFit"></image>
					</view>
					<view class="footerConten" @tap='tocarAdmin()'>
						<image src="../../static/productionAdmin/cheliangbeian.png" style="width: 150rpx; height: 150rpx; margin-left: 30rpx;"
						 mode="aspectFit"></image>
						<view style="display: flex; flex-direction: column;">
							<text style="font-size: 34rpx; font-weight: 600; margin-bottom: 10rpx;">车辆备案及查询</text>
							<text style="font-size: 26rpx; color: #C3C3C3;">查看签约车辆备案信息</text>
						</view>
						<image src="../../static/productionAdmin/button2.png" style="width: 60rpx; height: 60rpx; margin-right: 30rpx;"
						 mode="aspectFit"></image>
					</view>
				</view>
			</template>
			<template v-else-if="government">
				<!-- <view style="display: flex; width: 750rpx; height: 136rpx; background: #4AC997; justify-content: center; align-items: flex-end;">
					<text style="font-size: 32rpx; color: white; font-weight: 400; margin-bottom: 20rpx;"></text>
				</view> -->
				<view style="height: 150rpx;"></view>
				<view class="searchModel">
					<input disabled="true" @tap="toSearch()" placeholder-style="font-size:30rpx;" placeholder="搜索养殖场" />
					<text class="icon iconfont icon-search "></text>
				</view>
			
				<!-- <view class="scan">
					<image @tap="adminScanQR()" src="../../static/productionAdmin/scan.png" style="width: 60rpx; height: 60rpx; " ></image>
				</view> -->
				<!-- 定位 -->
				<view class="location">
					<image src="../../static/common/location.png"></image>
					<text>{{currentLocation}}</text>
					<text v-if="currentLocationNext" style="margin: 0rpx 10rpx;">---</text>
					<text v-if="currentLocationNext">{{currentLocationNext}}</text>
				</view>
				<!-- 滚动栏 -->
				<view class="uni-tab-bar">
					<scroll-view scroll-x class="uni-swiper-tab" scroll-with-animation :scroll-left="scrollLeft">
						<block v-for="(tab,index) in tabBars" :key="index">
							<view class="swiper-tab-list" :class="{'active':tabIndex==index}" @tap="tabtap(index)" :id="'top'+ index">
								{{tab.name}}
							</view>
						</block>
					</scroll-view>
				</view>
				<swiper class="swiper-box" :style="{height:swiperHeight + 'px'}" :current="tabIndex" @change='tabChange'>
					<swiper-item v-for="(items,index) in nextTabList " :key='index'>
						<scroll-view scroll-y class="scrollView">
							<!-- 当前所属位置其内养殖场 -->
							<template v-if="load">
								<block v-for="(item,index2) in nextList" :key="index2">
									<view class="dataView">
										<view class="dataViewNav"><text>{{item.name}}</text><text v-if="isTown" @tap="searchNextFarmer(item.name,index2)">查看更多</text></view>
										<view class="dataViewBox">
											<block v-for="(data,index3) in item.farm" :key="index3">
												<text @tap="toFarmDetail(data)">{{data.farmName}}</text>
											</block>
										</view>
									</view>
								</block>
							</template>
							<template v-else>
								
							</template>
						</scroll-view>
					</swiper-item>
				</swiper>
			</template>
		</template>
		<template v-else>
			
		</template>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				scrollLeft: 0,
				arrList:[
					'1','2','3','4','5','6','7','8','9','10',
				],
				currentLocation: '',
				currentLocationNext: '',
				swiperHeight: 1000,
				tabIndex: 0,
				tabBars: [], //滚动栏选项
				isTown: true, //判断是否处于镇级
				nextTabList: [], //临时下级县镇村
				nextList: [], //当前县镇村
				user: true,
				government: false,
				isshow:"",
				load:true
			};
		},
		onReady() {
			
			this.getRole()
		},
		onNavigationBarButtonTap() {
			this.isUserScan()
		},
		mounted() {
		},
		onLoad() {
			//获取屏幕可使用高度
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.windowHeight - uni.upx2px(145)
				}
			});
		},
		methods: {
			//判断扫码
			isUserScan(){
				var role = this.User.userRight.name;
				console.log(role)
				if (role == "government") {
					console.log(11)
					this.adminScanQR()
				}
				else {
					console.log(12)
					this.scanQR()
				}
			},
			//获取所有地址
			gerFarmCounty() {
				// console.log(1)
				uni.request({
					url: this.confige.webUrl + "/statistics/getBipolarRegion",
					data: {},
					header: {
						'X-Token': this.User.token
					},
					success: (res) => {
						// console.log(res)
						var arr = [];
						var list = res.data.result;
						console.log(list)
						for (let i = 0; i < list.length; i++) {
							if (list[i]) {
								arr.push({
									name: list[i].name
								})
							}
						};
						console.log(arr)
						this.tabBars = arr;
						this.nextTabList = list;
						//根据当前县获取下级所有镇养殖场
						this.searchNextFarmer();
					}
				})
			},
			//根据当前县获取下级所有镇养殖场
			searchNextFarmer(farmTown, index) {
				this.load = false;
				this.nextList = uni.getStorageSync('nextList'+this.tabIndex);
					//定位市
				this.isTown = true;
				this.currentLocation = this.tabBars[this.tabIndex].name;
				//	
				console.log(this.currentLocation)
				this.currentLocationNext = farmTown;
				uni.request({
					url: this.confige.webUrl + "/statistics/getVillageList",
					data: {
						farmCounty: this.tabBars[this.tabIndex].name,
						farmTown: farmTown
					},
					header: {
						'X-Token': this.User.token
					},
					success: (res) => {
						console.log(res)
						if (!farmTown) {
							var list = res.data.result[0].list; //根据地址回执数组
							var list1 = this.nextTabList[this.tabIndex].nextCity; //当前县下拥有的镇
							for (let y = 0; y < list1.length; y++) {
								list1[y]['farm'] = []
								for (let i = 0; i < list.length; i++) { //判断回执
									if (list[i].farmTown === list1[y].name) {
										var farm = list1[y].farm;
										farm.push({
											farmTown: list[i].farmTown,
											farmId: list[i].farmId,
											farmName: list[i].farmName
										})
									}
								}
							}
							this.nextList = list1;
							uni.setStorageSync('nextList'+this.tabIndex, list1);
							setTimeout(()=>{
								this.load = true;
							},10)
						} else if (farmTown) {
							// console.log(res)
							this.isTown = false;
							var list = res.data.result[0].list; //根据地址回执数组
							var list1 = this.nextTabList[this.tabIndex].nextCity[index].nextCity; //当前选中县下的镇
							console.log(list1)
							for (let y = 0; y < list1.length; y++) {
								list1[y]['farm'] = []
								for (let i = 0; i < list.length; i++) { //判断回执
									if (list[i].farmVillage === list1[y].name) {
										var farm = list1[y].farm;
										farm.push({
											farm: list[i].farmVillage,
											farmId: list[i].farmId,
											farmName: list[i].farmName
										})
									}
								}
							}
							this.nextList = list1
							setTimeout(()=>{
								this.load = true;
							},10)
						}
					}
				})
				
			},
			//前往搜索
			toSearch() {
				uni.navigateTo({
					url: "./search/search"
				})
			},
			//员工点击扫码
			scanQR() {
				uni.scanCode({
					success: (res) => {
						 
						 this.arr = JSON.parse(res.result);
						 if(!this.arr.farmId){
						 	uni.showToast({
						 		title:"未识别出养殖场信息！"
						 	});
						 	return;
						 }
						 uni.navigateTo({
						 	url: "./government/farmerDetails?farmId=" + this.arr.farmId
						 })
						 
						// this.arr = JSON.parse(res.result);
						// console.log(this.arr)
						// if(!this.arr.farmId){
						// 	uni.showToast({
						// 		title:"未识别出养殖场信息！"
						// 	});
						// 	return;
						// }
						// if(this.User.userRight.name==""){
						// 	uni.showToast({
						// 		title:"您已拥有养殖场账号权限"
						// 	});
						// 	return;
						// }
						// //员工扫码
						// if (this.arr.url) {
						// 	uni.request({
						// 		url: this.confige.webUrl + "/worker",
						// 		data: {
						// 			farmId: this.arr.farmId,
						// 			farmUUID: this.arr.farmUUID
						// 		},
						// 		header: {
						// 			'X-Token': this.User.token
						// 		},
						// 		success: (data) => {
						// 			console.log(data)
						// 			// if (data.data.code == 200) {
						// 			// 	uni.navigateTo({
						// 			// 		url: "./application?farmId=" + this.arr.farmId
						// 			// 	})
						// 			// } else if (data.data.code == 400) {
						// 			// 	uni.showModal({
						// 			// 		showCancel: false,
						// 			// 		title: "提示",
						// 			// 		content: "您已提交过审核，请不要重复"
						// 			// 	})
						// 			// }
						// 			// else if (data.data.code == 405) {
						// 			// 	uni.showModal({
						// 			// 		showCancel: false,
						// 			// 		title: "提示",
						// 			// 		content: data.data.data
						// 			// 	})
						// 			// }
									
						// 		}
						// 	})
						// }
						// else{
						// 	uni.showModal({
						// 		showCancel:false,
						// 		title:"提示",
						// 		content:"请扫员工邀请码！"
						// 	})
						// }
					}
				});
			},

			//政府点击扫码
			adminScanQR() {
				uni.scanCode({
					success: (res) => {
						this.arr = JSON.parse(res.result);
						// console.log(res.result)
						// console.log(this.arr.farmId)
						if(!this.arr.farmId){
							uni.showToast({
								title:"未识别出养殖场信息！"
							});
							return;
						}
						uni.navigateTo({
							url: "./government/farmerDetails?farmId=" + this.arr.farmId
						})
					}
				});
			},
			//获取用户角色
			getRole() {
				var role = this.User.userRight.name;
				console.log(role)
				 if (role == "government") {
					 this.isshow = 1;
					this.government = true;
					this.user = false;
					uni.setNavigationBarTitle({
					    title: '畜牧生产管理'
					});
					uni.setNavigationBarColor({
					    frontColor: '#ffffff',
					    backgroundColor: '#4AC997',
					});
					// uni.showNavigationBarLoading()
					//获取所有区
					this.gerFarmCounty();
				}
				else {
					this.isshow = 1;
					this.user = true;
					this.government = false;
					uni.setNavigationBarTitle({
					    title: ''
					});
				} 
			},
			//养殖信息填报
			farmFilePost() {
				uni.navigateTo({
					url: 'farmer/farmAccount'
				})
			},
			//判断养殖户权限
			isRight() {
				var role = this.User.userRight.name;
				console.log(role)
				var isRight = false;
				if (role != 'livestock') {
					isRight = true;
				}
				return isRight;
			},
			//粪污指导
			faecesDispose() {
				console.log(this.isRight())
				if (this.isRight()) {
					uni.showModal({
						title: "提示",
						content: "您暂无权限访问粪污指导功能模块，请先申请养殖户账号权限",
						showCancel: false,
						success: (res) => {}
					});
					return;
				}
				uni.navigateTo({
					url: 'farmer/faecesDispose'
				})
			},
			//前往养殖场详情
			toFarmDetail(data) {
				// console.log(data);
				uni.navigateTo({
					url: "./government/farmerDetails?farmId=" + data.farmId
				})
			},
			//生猪车辆备案及查询
			tocarAdmin() {
				if (this.isRight()) {
					uni.showModal({
						title: "提示",
						content: "您暂无权限访问车辆备案及查询功能模块，请先申请养殖户账号权限",
						showCancel: false,
						success: (res) => {}
					});
					return;
				}
				uni.navigateTo({
					url: 'farmer/carNumList'
				})
			},
			// 顶部选项卡选中
			tabtap(e) {
				this.tabIndex = e;
				this.scrollLeft = (e - 1) * 60
				this.searchNextFarmer();
			},

			//滑动监听事件
			tabChange(e) {
				
				this.tabIndex = e.detail.current;
				this.scrollLeft = (e.detail.current - 1) * 60;
				this.searchNextFarmer();
				
			}
		}
	}
</script>

<style lang="less">
	@import "../../common/global.less";
	@import "../../common/animate.css";
	@import "../../common/iconfont.css";
	@import "../../common/uni.css";
    // uni-page-head
    // {
    // display: none;
    // }
	//顶部选项卡样式
	.swiper-tab-list {
		color: #878787;
		font-size: 30rpx;
		border: 1rpx solid #e5e5e5;
		height: 60rpx;
		line-height: 60rpx;
	}
	
	.uni-swiper-tab {
		width: 100%;
		white-space: nowrap;
		line-height: 138rpx;
		height: 100rpx;
		border-bottom: 0;
		text-align: center;
	}
	
	.uni-swiper-tab .active {
		color: #FFFFFF;
		background-color: #4AC997;
	}
	.head {
		height: 550rpx;
		width: 750rpx;
		background-image: url(../../static/productionAdmin/bg1.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.headContent {
		display: flex;
		flex-direction: column;
		margin-left: 44rpx;
	}

	.footer {
		width: 660rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: white;
		margin-top: -200rpx;
		margin-left: 45rpx;
	}

	.footerConten {
		height: 240rpx;
		width: 660rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		box-shadow: 2rpx 4rpx 24rpx 4rpx #d9f4e9;
		border-radius: 10rpx;
	}

	// 位置
	.location {
		height: 60rpx;
		display: flex;
		align-items: center;
		transform: translate(0rpx, 20rpx);

		>image {
			height: 50rpx;
			width: 50rpx;
		}

		>text {
			line-height: 50rpx;
			color: #000000;
		}
	}

	//选项下方区域
	.scrollView {
		width: 98%;
		margin: auto;
		height: 100%;
	}

	//选项卡内容
	.dataView {
		// width: 90%;
		margin: 20rpx auto;
		border-radius: 30rpx;
	}

	.dataViewNav {
		padding: 0rpx 20rpx;
		font-size: 35rpx;
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		border-bottom: 1rpx solid #f4f4f4;

		>text:nth-of-type(1) {
			color: #4AC997;
			border-bottom: 5rpx solid #4AC997;
			height: 60rpx;
		}

		>text:nth-of-type(2) {
			font-size: 30rpx;
			color: #007AFF;
		}
	}

	.dataViewBox {
		min-height: 250rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		// justify-content: center;
		align-content: space-around;
		border-bottom: 1rpx solid #dfdfdf;

		>text {
			border-radius: 50rpx;
			min-width: 170rpx;
			text-align: center;
			background-color: #EBEDF4;
			color: #6E6E6E;
			margin: 20rpx;
			padding: 10rpx 15rpx;
			letter-spacing: 4rpx;
		}
	}

	//顶部选项卡样式
	.swiper-tab-list {
		color: #878787;
		font-size: 30rpx;
		border: 1rpx solid #e5e5e5;
		height: 60rpx;
		line-height: 60rpx;
	}

	.uni-swiper-tab {
		width: 100%;
		white-space: nowrap;
		line-height: 138rpx;
		height: 100rpx;
		border-bottom: 0;
	}

	.uni-swiper-tab .active {
		color: #FFFFFF;
		background-color: #4AC997;
	}

	.centerFlexLayout {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.searchModel {
		position: relative;
		width: 75%;
		margin: 20rpx auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 5rpx;
		height: 60rpx;
		border: 2rpx solid #C3EDDD;
		border-radius: 60rpx;
		color: #717171;

		>input {
			width: 85%;
		}

		>text {
			font-size: 35rpx;
		}
	}
   .scan {
	   // width: 60rpx; height: 60rpx;
		position: absolute;
		right: 0;
		top:1;
		margin: -85rpx 15rpx 0rpx 0rpx;
	}
	//搜索框
	.options {
		height: 650rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		>view {
			height: 280rpx;
			width: 340rpx;
			border-radius: 25rpx;
			margin: 10rpx;
			.centerFlexLayout;

			image {
				height: 120rpx;
				width: 120rpx;
			}

			text {
				color: #FFFFFF;
				padding-top: 20rpx;
			}
		}

		>view:nth-of-type(1) {
			background: linear-gradient(to bottom, #6CC0FD, #4499D8);

			image {
				height: 100rpx;
				width: 100rpx;
			}
		}

		>view:nth-of-type(2) {
			background: linear-gradient(to bottom, #F4AE7D, #FF7748);
		}

		>view:nth-of-type(3) {
			background: linear-gradient(to bottom, #44C393, #57BF5F);
			width: 700rpx
		}
	}

	.scanModel {
		height: 450rpx;
		.centerFlexLayout;

		>image {
			height: 180rpx;
			width: 180rpx;
		}

		>text {
			color: @fontcolorthree;
			margin-top: 30rpx;
			font-size: 35rpx;
			letter-spacing: 2rpx;
		}
	}
</style>
